<template>
	<div class="flex flex-col items-center bg-bg-3 p-[20px] rounded-lg shadow-md w-[207px] h-[209px]">
		<account-avatar
			:width="40"
			:data="data.avatar.face"
			:to-profile="false"
			@click="handleProfile" />

		<!-- 名字 -->
		<h2 class="mt-1 text-t-1 leading-[26px]">{{ data.userName }}</h2>

		<!-- 图标与角色 -->
		<div class="flex items-center mt-1">
			<span class="text-t-1">Rock</span>
		</div>

		<!-- ID -->
		<p class="mt-1 text-t-3 text-sm">ID: {{ data.userId }}</p>
		<p class="w-[100%] h-[1px] bg-border-1 my-2"></p>
		<div>
			<slot></slot>
		</div>
	</div>
</template>
<script lang="ts" setup>
import AccountAvatar from '@/components/account/account-avatar/index.vue'
import { useProfileStore } from '@/store'

const profileStore = useProfileStore()
const props = defineProps({
	data: {
		type: Object,
		default: () => {
			return {}
		}
	}
})

const handleProfile = () => {
	profileStore.showProfile({
		show: true,
		userId: props.data.userId
	})
}
</script>
